body {
	height: 100vh;
	overflow: hidden;
	background-color: #333;
}

main {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	perspective: 100vmin;
	
	figure {
		--x: 0;
		--y: 0;
		position: relative;
		transform: rotateY(calc(var(--x) * 20deg)) rotateX(calc(var(--y) * -20deg));
		width: 80vmin;
		height: 60vmin;
		
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			padding: 1vmin;
			background-color: white;
			filter: sepia(0.85) saturate(1.4) brightness(calc(0.7 + (var(--x) + var(--y)) * -0.15));
		}
		
		.reflect {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			-webkit-mask-image: url(https://assets.codepen.io/2509128/noise3.png);
			mask-size: 66%;
			mix-blend-mode: overlay;
			
			&::before {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to left, transparent, #fed, transparent);
				background-repeat: no-repeat;
				transform: translateX(calc(-75% + -100% * var(--x) + -50% * var(--y))) rotate(40deg) scaleY(3);
			}
		}
	}
}